<template>
    <div class="edit-popup-modal">
        <vxe-input class="edit-popup-input" v-model="modelValue" :placeholder="placeholder" @click="popupEvent"></vxe-input>
        <vxe-modal show-footer destroy-on-close class-name="vxe-table--ignore-clear edit-popup-box" :width="width" :height="height" v-model="interiorModalVisible" @confirm="confirmEvent" @hide="hide" @close="close" @show="show" @cancel="cancel" @zoom="zoom" v-bind="attrs">
            <template #default>
                <monaco-editor :modelValue="modelValue" height="100%" :language="language" @update:modelValue="editorValue" />
            </template>
        </vxe-modal>
    </div>
</template>
<script lang="ts">
    import { defineComponent, PropType, ref } from "vue";
    import { MonacoEditor } from "@/components/MonacoEditor";
    import XEUtils from "xe-utils";
    export default defineComponent({
        name: "EditorPopupModalTable",
        components: { MonacoEditor },
        props: {
            params: Object as PropType<Object>,
            width: {
                type: String as PropType<string>,
                default: "800",
            },
            height: {
                type: String as PropType<string>,
                default: "600",
            },
            language: {
                type: String as PropType<string>,
                default: "typescript",
            },
            preComment: {
                type: String as PropType<string>,
                default: "",
            },
            modelValue: {
                type: String as PropType<string>,
                default: "",
            },
            editorOptions: {
                type: Object as PropType<object>,
                default: () => ({}),
            },
            placeholder: {
                type: String as PropType<string>,
                default: "请输入",
            },
        },
        emits: ["update:visible", "update:modelValue", "confirm", "hide", "close", "show", "cancel", "zoom"],
        setup(props, { emit, attrs }) {
            const interiorModalVisible = ref(false);
            const hide = (data: any) => {
                interiorModalVisible.value = false;
                emit("confirm", { value: data, attrs, props });
            };
            const close = (data: any) => {
                emit("close", { value: data, attrs, props });
            };
            const show = (data: any) => {
                emit("show", { value: data, attrs, props });
            };
            const cancel = (data: any) => {
                emit("cancel", { value: data, attrs, props });
            };
            const zoom = (data: any) => {
                emit("zoom", { value: data, attrs, props });
            };
            const confirmEvent = (data: any) => {
                emit("confirm", { value: data, attrs, props });
            };
            const editorValue = (value: any) => {
                emit("update:modelValue", value);
            };
            const popupEvent = () => {
                interiorModalVisible.value = true;
            };
            return {
                interiorModalVisible,
                confirmEvent,
                hide,
                close,
                show,
                cancel,
                zoom,
                attrs,
                editorValue,
                popupEvent,
            };
        },
    });
</script>

<style lang="scss" scoped>
    .edit-popup-modal {
        display: flex;
        align-items: center;
    }
    .edit-popup-input {
        width: auto;
        flex-grow: 1;
    }
    .edit-popup-button {
        flex-shrink: 0;
    }
</style>
